<template>
  <div>
    <!--全局头部-->
    <MainHeader/>

    <!--主体-->
    <div class="view-subject-div">
      <!--轮播图-->
      <template>
          <el-carousel :interval="3000" type="card" indicator-position="none">
            <el-carousel-item v-for="item in Carousels" :key="item.id">
<!--              <h3 class="medium">{{ item }}</h3>-->
              <el-image :src="item.imgUrl"></el-image>
            </el-carousel-item>
          </el-carousel>
      </template>
      <!--就诊人横幅-->
      <el-row class="visitor" type="flex" align="middle">
        <el-col :span="2" style="margin-left: -5px">
          <img src="@/image/index-icon/就诊人.png" alt="就诊人"/>
        </el-col>
        <el-col :span="10" style="text-align: left;">
          <span>当前就诊人：{{ this.currentUsername }}</span>
        </el-col>
        <el-col :span="8"/>
        <el-col :span="4" style="text-align: left;">
          <router-link to="#" style="text-decoration: none; color: #64B79D">
            其它就诊人 >
          </router-link>
        </el-col>
      </el-row>
      <!-- 就诊服务卡片 -->
      <el-card class="service-card">
        <div slot="header" style="display: table;">
          <span>就诊服务</span>
        </div>
        <!--选项卡-->
        <div class="card-tab">
          <div>
            <router-link to="/scheduling"
                         class="card-tab-router-link" style="background-color: #E4F0FC;">
              <span>挂号</span>
              <img src="@/image/index-icon/挂号.png" alt="挂号"/>
            </router-link>
          </div>
          <div>
            <router-link to="#"
                         class="card-tab-router-link" style="background-color: #97d9ff">
              <span>我的挂号</span>
              <img src="@/image/index-icon/我的挂号.png" alt="我的挂号"/>
            </router-link>
          </div>
          <div>
            <router-link to="#"
                         class="card-tab-router-link" style="background-color: #FBEDE4">
              <span>门诊缴费</span>
              <img src="@/image/index-icon/门诊缴费.png" alt="门诊缴费"/>
            </router-link>
          </div>
          <div>
            <router-link to="#"
                         class="card-tab-router-link" style="background-color: #FEEFE8">
              <span>门诊清单</span>
              <img src="@/image/index-icon/门诊清单.png" alt="门诊清单"/>
            </router-link>
          </div>
        </div>
        <!--选项按钮-->
        <div class="option-div">
          <div>
            <router-link to="/" class="option-router-link">
              <img src="@/image/index-icon/高级问诊.png" alt="高级问诊"/>
              <span>高级问诊</span>
            </router-link>
          </div>
          <div>
            <router-link to="/index" class="option-router-link">
              <img src="@/image/index-icon/体检报告单.png" alt="体检报告单"/>
              <span>体检报告单</span>
            </router-link>
          </div>
          <div>
            <router-link to="/index" class="option-router-link">
              <img src="@/image/index-icon/检查报告单.png" alt="检查报告单"/>
              <span>检查报告单</span>
            </router-link>
          </div>
          <div>
            <router-link to="/index" class="option-router-link">
              <img src="@/image/index-icon/物价查询.png" alt="物价查询"/>
              <span>物价查询</span>
            </router-link>
          </div>
          <div>
            <router-link to="/search-docker" class="option-router-link">
              <img src="@/image/index-icon/查医生.png" alt="查医生"/>
              <span>查医生</span>
            </router-link>
          </div>
        </div>
      </el-card>

      <!-- 便民服务卡片 -->
      <el-card class="service-card">
        <div slot="header" style="display: table;">
          <span>便民服务</span>
        </div>
        <!--选项按钮-->
        <div class="option-div">
          <div>
            <router-link to="/" class="option-router-link">
              <img src="@/image/index-icon/医院信息.png" alt="医院信息"/>
              <span>医院信息</span>
            </router-link>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import IndexJs from './Index.js'

export default IndexJs
</script>

<style scoped>
@import "./Index.css";
@import "@/common/CommonCss.css";
</style>
